<template>
  <div class="app-bar" v-if="showAppBar">
    <svg @click="back" class="close-icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2007" width="200" height="200"><path d="M519.02036023 459.47959989L221.8941505 162.35411435a37.07885742 37.07885742 0 1 0-52.45354772 52.40502656l297.12476134 297.15010821L169.44060278 809.05863314a37.07885742 37.07885742 0 1 0 52.42964924 52.42892505l297.15010821-297.12476136 297.15010822 297.12476136a37.07885742 37.07885742 0 1 0 52.42892504-52.40430237l-297.12476135-297.1740067 297.12476135-297.12548553a37.07885742 37.07885742 0 1 0-52.42892504-52.42964924L519.04498291 459.47959989z" fill="#2c2c2c" p-id="2008"></path></svg>
    <div class="title">{{ title }}</div>
    <svg @click="openInBrowser" t="1637573044087" class="more-icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2472" width="200" height="200"><path d="M294.436713 512c0 47.864373-39.16176 87.02511-87.02511 87.02511S120.385469 559.864373 120.385469 512s39.16176-87.02511 87.02511-87.02511S294.436713 464.135627 294.436713 512z" p-id="2473"></path><path d="M599.02511 512c0 47.864373-39.16176 87.02511-87.02511 87.02511S424.97489 559.864373 424.97489 512 464.135627 424.97489 512 424.97489 599.02511 464.135627 599.02511 512z" p-id="2474"></path><path d="M903.614531 512c0 47.864373-39.16176 87.02511-87.02511 87.02511S729.563287 559.864373 729.563287 512s39.16176-87.02511 87.02511-87.02511S903.614531 464.135627 903.614531 512z" p-id="2475"></path></svg>
  </div>
</template>

<script>
export default {
  props: {
    title: String
  },

  data() {
    return {
      showAppBar: localStorage.getItem('showAppBar') || true
    }
  },

  methods: {
    back () {
      this.$router.go(-1)
    },
    openInBrowser () {

    }
  }
}
</script>

<style lang="less" scoped>
.app-bar {
  position: relative;
  padding: 20px 15px 15px 15px;
  background: #EDEDED;

  .close-icon {
    height: 20px;
    width: 20px;
    position: absolute;
    left: 15px;
    top: 20px;
  }

  .more-icon {
    height: 20px;
    width: 20px;
    position: absolute;
    right: 15px;
    top: 20px;
  }

  .title {
    text-align: center;
    font-weight: bolder;
    font-size: 17px;
  }
}
</style>